<template>
  <div class="bg-#F8FAFD text-center pt-75 pb-126">
    <h1 text-35 mb-14>支付体验测试</h1>
    <div class="text-#5F6368 text-14 mb-70">零风险体验完整的支付流程</div>
    <div class="flex gap-37 justify-center">
      <div class="box pt-47 px-47 h-682">
        <div class="icon-wrap">
          <img src="@/assets/image/icon-phone.png" alt="" />
        </div>
        <h1 text-34 mt-28>选择支付方式</h1>
        <div class="desc mt-24 mb-36 text-#5F6368">
          支持微信支付、支付宝等多种支付方式，满足不同用户需求
        </div>
        <div class="flex gap-9 justify-center">
          <div class="pay-method" :class="{ checked: payMethods === 0 }" @click="payMethods = 0">
            <img src="@/assets/image/wechat.png" alt="" />
            <div mt-14 text-18>微信支付</div>
          </div>
          <div class="pay-method" :class="{ checked: payMethods === 1 }" @click="payMethods = 1">
            <img src="@/assets/image/alipay.png" alt="" />
            <div mt-14 text-18>支付宝支付</div>
          </div>
        </div>
      </div>
      <div class="box pt-47 px-47 h-682">
        <div class="icon-wrap">
          <img src="@/assets/image/icon-ticket.png" alt="" />
        </div>
        <h1 text-34 mt-25>选择支付金额</h1>
        <div class="desc mt-24 mb-36 text-#5F6368">测试支付金额1元以下，零成本体验支付流程</div>
        <div class="flex gap-18 justify-center">
          <div
            class="pay-amount"
            :class="{ checked: payAmount === i.value }"
            @click="payAmount = i.value"
            v-for="(i, idx) in amountList"
            :key="idx"
          >
            <h2 text-28>{{ i.value }}</h2>
            <h2 text-28>元</h2>
            <div class="text-#5F6368 mt-12">{{ i.text }}</div>
          </div>
        </div>
      </div>
      <div class="box pt-47 px-47 h-682">
        <div class="icon-wrap">
          <img src="@/assets/image/icon-checked.png" alt="" />
        </div>
        <h1 text-34 mt-25>聚合支付</h1>
        <div class="desc mt-24 mb-36 text-#5F6368">
          采用最新技术聚合收款二维码、多账号收款更加安全
        </div>
        <div h-200>QrCode</div>
        <div>
          <el-button type="primary" size="large" w-146 h-54 text-18 @click="toTest">确认测试</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import API from '@/request/api/index'

const payMethods = ref(0)
const amountList = [
  { value: 0.01, text: '最小测试金额' },
  { value: 0.1, text: '小额测试' },
  { value: 0.5, text: '常用测试' }
]
const payAmount = ref(0.01)
const toTest = () => {
  API.payTest({ 
    totalAmount: payAmount.value 
  }).then(res => {
    
  })
}
</script>

<style scoped lang="scss">
.box {
  width: 422px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0px 4.7px 23.5px 0px rgba(0, 0, 0, 0.05);
  .desc {
    font-size: 18px;
    line-height: 32px;
    text-align: center;
    color: #5f6368;
  }
  .pay-method {
    width: 116px;
    height: 158px;
    text-align: center;
    padding-top: 21px;
    border-radius: 12px;
    border: 2px solid transparent;
    transition: all 0.3s;
    cursor: pointer;
    img{
      width: 70px;
      height: 70px;
      object-fit: contain;
    }
  }
  .pay-amount {
    width: 109px;
    height: 194px;
    text-align: center;
    padding-top: 26px;
    cursor: pointer;
    border-radius: 12px;
    border: 2px solid transparent;
    transition: all 0.3s;
    background: rgba(68, 139, 245, 0.05);
  }
  .checked {
    border-color: #448bfb;
    background: rgba(68, 139, 245, 0.05);
  }
}
.icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 94px;
  height: 94px;
  border-radius: 50%;
  background: rgba(68, 139, 245, 0.1);
  margin: 0 auto;
  img {
    height: 47px;
  }
}
</style>
